<template>
  <van-popup position="right" v-model:show="show" :style="{ height: '100%', width: '100%' }">
    <van-nav-bar title="新的习惯" right-text="保存" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
    <div class="wrap-header">
      <div class="header-icon" :style="{ backgroundColor:state.addColor }">
        <div class="iconfont icon-wenjuicon icntitle" :class="state.addIconClass"></div>
      </div>
      <van-field v-model="state.title" arrow-direction="left" input-align="center" input-width="100px" placeholder="填入习惯的名称" border="true" />
    </div>
    <div class="wrap-body">
      <h3><i class="iconfont icon-bijiben"></i> 挑选颜色和图标：</h3>
      <div class="title-box">
        <div class="title-border" :class="{'activeBorder':state.activeBorder === item.id}" @click="chooseColor(item)" v-for="(item, index) in colorArr" :key="item.id">
          <div class="title" :style="{ backgroundColor: item.color }">
          </div>
        </div>
      </div>
      <div class="icons-box">
        <div class="icons" :class="{'activeBg':state.activeBgc === icon.id}" @click="chooseIcon(icon)" v-for="(icon, index) in icons" :key="icon.id"  >
          <i class="iconfont icon-s" :class="icon.name"></i>
        </div>
      </div>
      <h3><i class="iconfont icon-biaoqian"></i> 习惯标签：</h3>
      <div class="label-box">
        <p :class="{'activeBg':state.activeBgf === item.id}" v-for="(item, index) in label" :key="item.id" @click="chooseLable(item)">{{item.name}}</p>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, reactive} from 'vue'
import axios from "@/api";
import { showToast } from 'vant';

const show = ref(false)

const colorArr = [
  {id: 1, color: '#98d397'},
  {id: 2, color: '#a2bbb7'}, 
  {id: 3, color: '#e7ccc3'},
  {id: 4, color: '#83ae90'},
  {id: 5, color: '#6ba2a9'},
  {id: 6, color: '#8aa09d'},
  {id: 7, color: '#6185a7'},
  {id: 8, color: '#d29b9f'},
  {id: 9, color: '#a8dee4'},
  {id: 10, color: '#d1bcb1'},
  {id: 11, color: '#eccd82'},
  {id: 12, color: '#d4e8c5'},
  {id: 13, color: '#cd8256'},
  {id: 14, color: '#736f70'},
  {id: 15, color: '#9068b0'},
  {id: 16, color: '#e7eaed'},
]
const icons = [
  { id: 1, name: 'icon-wenjuicon' },
  { id: 2, name: 'icon-xuexiyongpin' },
  { id: 3, name: 'icon-icon-test' },
  { id: 4, name: 'icon-icon-test2' },
  { id: 5, name: 'icon-icon-test3' },
  { id: 6, name: 'icon-xuexishijian' },
  { id: 7, name: 'icon-yundongjianshen' },
  { id: 8, name: 'icon-shuweixuexi', },
  { id: 9, name: 'icon-shuweixuexi1',},
  { id: 10, name: 'icon-yundongmao', },
  { id: 11, name: 'icon-yundongbisai'},
  { id: 12, name: 'icon-xuexi' },
  { id: 13, name: 'icon-yundongjiankang' },
  { id: 14, name: 'icon-xuexi1' },
  { id: 15, name: 'icon-jiantiyundong' },
  { id: 16, name: 'icon-xinxi' },
  { id: 17, name: 'icon-lanqiu' },
  { id: 18, name: 'icon-xuexijihua-' },
  { id: 19, name: 'icon-wenju' },
  { id: 20, name: 'icon-yundonglei' },
  { id: 21, name: 'icon-yundongyongpin' }
]
const label = [
  { id: 1, name: '起床' },
  { id: 2, name: '早晨' },
  { id: 3, name: '中午' },
  { id: 4, name: '下午' },
  { id: 5, name: '晚上' },
  { id: 6, name: '睡前' },
]

const state = reactive({
  activeBorder:'',
  activeBgc:'',
  activeBgf:'',
  title:'',
  addColor:'',
  addIconClass:'',
  addLable:'',

})

//关闭添加习惯
const onClickLeft = () => {
  show.value = false
}

const chooseColor = (item) =>{
  state.activeBorder = item.id
  state.addColor = item.color
}
const chooseIcon = (item) =>{
  state.activeBgc = item.id
  state.addIconClass = item.name

}
const chooseLable = (item) =>{
  state.activeBgf = item.id
  state.addLable = item.name
}

const emits = defineEmits(['select'])

//添加习惯
const onClickRight = async() => {
    if(state.title && state.addLable && state.addColor && state.addIconClass !== ''){
      await axios.post('/habit/publish',{
      title: state.title,
      habit_label: state.addLable,
      color: state.addColor,
      icon_class: state.addIconClass,
    })
    show.value = false
    showToast('添加成功，要坚持哦~');
  }else{
    showToast('请先创建习惯');
  }

}


defineExpose({
  show
})

</script>

<style lang="less" scoped>
.wrap-header {
  margin-top: 46px;
  .header-icon {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin: 0 auto;
    background-color: #98d397;
    .icntitle {
      font-size: 24px;
      text-align: center;
      line-height: 50px;
    }
  }
}

.wrap-body {
  h3 {
    margin: 15px 10px;
    font-size: 16px;
  }

  .title-box {
    padding: 0px 5px 0px 12px;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(8, 1fr);
    .title-border {
      margin: 3px 6px;
      border-radius: 50%;
      height: 37px;
      .title {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        margin: 5px;
      }
    }
    .activeBorder{
        border: 1px solid #575757;
      }
    
  }

  .icons-box {
    padding: 10px 5px 10px 12px;

    .icons {
      width: 40px;
      height: 40px;
      border-radius: 5px;
      border: 1px solid #575757;
      display: inline-block;
      margin: 8px;
      text-align: center;
      line-height: 34px;
      .icon-s{
        font-size: 25px;
      }
    }
    .active{
      background-color: #f9e493;
    }
  }

  .label-box {
    width: 300px;
    height: 200px;
    margin-left: 10px;

    p {
      height: 30px;
      width: 60px;
      border-radius: 25px;
      border: 1px solid #575757;
      display: inline-block;
      color: #575757;
      margin: 10px 10px;
      text-align: center;
      line-height: 30px;
      font-size: 12px;
    }
  }
  .activeBg{
    background: #f6e396;
    font-weight: bold;
  }
  
}
</style>

<style>
.van-nav-bar__text {
  color: #000000;
}

.van-nav-bar .van-icon {
  color: #000000;
}

.van-cell {
  width: 130px;
  background: #f6f7f2;
  margin: 0 auto;
  border-radius: 5px;
  margin-top: 10px;
}
</style>